<template>
  <div class="main-box">
    <div class="welcome-img"></div>
    <div class="main-text">
      <p class="text">
        {{ nowTime }}
      </p>
      <p class="text">{{ word }}！欢迎您访问电商后台管理系统！</p>
    </div>
  </div>
</template>
<script>
// import { time } from 'echarts'
export default {
  data() {
    return {
      word: '您好',
      nowTime: ''
    }
  },
  created() {
    this.showtime()
  },
  methods: {
    // 每秒获取一次时间并赋值给 nowTime
    showtime() {
      var now = new Date()
      var year = now.getFullYear() // 年
      var month = this.checkTime(now.getMonth() + 1) // 月 记得要 +1
      var dates = this.checkTime(now.getDate()) // 日

      var h = this.checkTime(now.getHours()) // 时
      var m = this.checkTime(now.getMinutes()) // 分
      var s = this.checkTime(now.getSeconds()) // 秒

      var showTime = year + '年' + month + '月' + dates + '日 ' + h + ':' + m + ':' + s
      this.nowTime = showTime
      // 一秒刷新一次显示时间
      setTimeout(this.showtime, 1000)

      // 根据当前时间调整 word 的文字
      h = parseInt(h)
      if (h >= 0 && h < 5) {
        this.word = '夜深了，您早些休息呀'
      } else if (h >= 5 && h < 7) {
        this.word = '清晨好'
      } else if (h >= 7 && h < 11) {
        this.word = '上午好'
      } else if (h >= 11 && h < 14) {
        this.word = '中午好'
      } else if (h >= 14 && h < 17) {
        this.word = '下午好'
      } else if (h >= 17 && h < 19) {
        this.word = '傍晚好'
      } else if (h >= 19 && h < 24) {
        this.word = '晚上好'
      }
    },
    // 补零函数：不足10的情况，前面加0
    checkTime(i) {
      if (i < 10) {
        i = '0' + i
      }
      return i
    }
  }
}
</script>

<style lang="less" scoped>
.welcome-img {
  position: fixed;
  top: 60px;
  left: 64px;
  width: 100%;
  min-height: 100vh;
  z-index: 0;
  // background: url('../assets/welcome.jpg') no-repeat;
  background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F5%2F579309163403c.jpg%3Fdown&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637500734&t=93a405d87bfbb65600606236301acd23')
    no-repeat;
  background-size: 96% 92%;
}
.main-text {
  position: relative;
  z-index: 1;
}
.text {
  font-size: 26px;
  color: rgb(18, 181, 245);
  text-shadow: 2px 2px 2px rgb(47, 47, 47);
  font-weight: 700;
  margin-left: 35px;
}
</style>
